<template>
    <div class="reasoning">
        <div class="title">
            <span>自动推理设置</span>
        </div>
        <div class="form">
              <el-form
              ref="importData"
    :label-position="'right'"
    :model="form"
     label-width="200px"
    style="max-width: 460px"
        :rules='rules'
  >
    <el-form-item label="服务端后端网址:" prop="api">
    <el-input v-model="form.api"></el-input>
    </el-form-item>
    <el-form-item label="模型选择:" prop="modelVal">
      <el-select v-model="form.modelVal" class="m-2" placeholder="模型选择" size="large" @change="modelChange">
    <el-option
      v-for="item in modelSelect"
      :key="item.name"
      :label="item.label"
      :value="item.name"
    />
  </el-select>
    </el-form-item>
    <el-form-item label="使用全部预标注模型标签:" prop="radio">
          <el-radio-group v-model="form.radio" size="large" v-show="form.radio=='1'">
        <el-radio v-model="radio2" label="1" border size="medium">是</el-radio>
    <el-radio v-model="radio2" label="2" border size="medium">否</el-radio>
    </el-radio-group>
      <el-select  v-model="form.labelVal" multiple collapse-tags class="m-2" placeholder="模型选择"  size="large" v-show="form.radio=='2'" >
    <el-option
      v-for="item in LabelSelect"
      :key="item.id"
      :label="item.label"
      :value="item.id"
     
    />
  </el-select>
    </el-form-item>
    <el-form-item label="推理阈值:" prop="progress"  >
      <Slisd class="slisd"  @updateProgress='updateProgress' style="z-index:0" :min="0" :max="100" :value="progress" :isDrag="true" bgColor="#279CFF "/>  
    </el-form-item>
        <el-form-item>
      <el-button type="primary" @click="submit">
        确定
      </el-button>
      <el-button @click="go">返回</el-button>
    </el-form-item>
  </el-form>
        </div>
    </div>
</template>
<script lang="ts">
import {automaticMark} from "@/apis/automaticMark"
import { RequestCode } from '@/server/base'
import Slisd from "@/views/artificialMark/slisd.vue"
export default {
    name:'reasoning',
    components:{Slisd},
    data(){
        return {
          model:{} as any,
            form:{
                api:"localhost",
                radio:'1',
                modelVal:'',
                progress:50 as any,
                labelVal:[] as number[]
            },
           modelSelect:[] as any,
           LabelSelect:[] as any,
           rules:{
             api:[{ required: true, message: '后端网址不能为空', trigger: 'blur'}],
             radio:[{required: true}],
             modelVal:[{ required: true, message: '请至少选中一个模型', trigger: 'change'}],
             progress:[{required:true}]
           }
        }
    },
    created(){
      this.moduleList()
    },
    methods:{
      moduleList(){
        this.modelSelect=[]
        automaticMark.moduleList().then((res:RequestCode)=>{
          Object.keys(res.data).forEach(key => {
            this.modelSelect.push({
              name:key,
              label:res.data[key]
            })
      })
      console.log(this.modelSelect)
        })
      },
        updateProgress(val : number |string){
            this.form.progress=val
        },
        submit(){
           (this as any).$refs.importData.validate((valid : any) => {
          if (valid) {
            let label:any=[]
            if(this.form.radio=='1'){
              this.LabelSelect.forEach((item:any)=>{
                label.push(item.id)
              })
            }else{
              label=this.form.labelVal
            }
                 let params={
            confidence:parseFloat(this.form.progress) / 100,
            model_classes:label,
            // modelFolder:this.form.api,
            modelName:this.form.modelVal
          }
          console.log(params)
          automaticMark.autoLabelSetting(params).then((res:RequestCode)=>{
            (this as any).$store.commit('operate/updateAutoLabel',true);
            (this as any).$message.success('设置成功！');
            this.$router.push('/automaticMark')
          })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      
        },
        modelChange(val:string){
          this.LabelSelect=[]
          automaticMark.labelList({modelName:val}).then((res:RequestCode)=>{
              Object.keys(res.data).forEach(key => {
            this.LabelSelect.push({
              id:parseInt(key),
              label:res.data[key]
            })
              })
          })
        },
        go(){
           this.$router.push('/AutomaticMark')
        }
    }
}
</script>

<style lang="scss" scoped>
.reasoning{
    width: 100%;
    background: #fff;
    .title{
        height: 60px;
        box-sizing: border-box;
        padding-left: 30px;
        border-bottom: 1px solid rgb(240, 240, 240);
        line-height: 60px;
        font-weight: 500;
    }
   .form{
       display: flex;
       padding: 20px 0;
       justify-content: center;
        .slisd{
        top: -8px;
    }
   }
}
</style>
